<template>
  <div class="my-wallet" v-if="!getIsPhone">
    <div class="refund border-bottom box-shadow">
      <div class="item accout-info border-right">
        <div class="top">
          <span class="account-name">{{accountInfo.accountName}}</span>
          <span class="account-type">{{accountType[accountInfo.accountType]}}</span>
        </div>
        <div class="bottom">
          <span class="text">账户余额</span>
          <span>{{accountInfo.balance}}</span>
        </div>
      </div>
      <div class="item border-right" v-for="item in accountInfo.refundRate" :key="item.id">
        <div class="top">
          {{item.name}}
        </div>
        <div class="bottom">
          {{item.rate}}
        </div>
      </div>
    </div>
    <div class="balance"> 
      <bill-board class="billboard-adjust" v-for="(item, index) in accountInfo.balances" :key="item.id">
        <div class="balance-item hover-style" 
          @mouseenter="handleMouseEnter(index)" 
          @mouseleave="handleMouseLeave">
          <div 
            class="mask" 
            v-show="activeBalanceIndex == index" 
            @click="handleRefresh"
            >
            <span 
              class="icon" 
              :class="isRefreshFinish ? '' : 'rotate'"
              >
              <i class="iconfont iconrefresh"></i>
            </span>
          </div>
          <div class="content-wrapper">
            <span class="icon">
              <icon-svg :icon-class="item.icon"></icon-svg>
            </span>
            <span class="context">
              <span class="name">{{item.name}}:</span>
              <span class="number">{{item.balance}}</span>
            </span>
          </div>
        </div>
      </bill-board>
    </div>
  </div>
  <div class="my-wallet" v-else>
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        我的钱包
      </template>
    </header-template-phone>
    <div class="main">
      <div class="refund border-bottom">
        <div class="item" :class="(index + 1) % 4 == 0 ? '' : 'border-right'" v-for="(item, index) in accountInfo.refundRate" :key="item.id">
          <div class="top">
            {{item.name}}
          </div>
          <div class="bottom">
            {{item.rate}}
          </div>
        </div>
      </div>
      <div class="balance"> 
        <bill-board class="billboard-adjust" v-for="(item, index) in accountInfo.balances" :key="item.id">
          <div class="balance-item" 
            @mouseenter="handleMouseEnter(index)" 
            @mouseleave="handleMouseLeave">
            <div class="mask" v-show="activeBalanceIndex == index">
              <span 
                class="icon" 
                @click="handleRefresh"
                :class="isRefreshFinish ? '' : 'rotate'"
                >
                <i class="iconfont iconrefresh"></i>
              </span>
            </div>
            <div class="content-wrapper">
              <span class="icon border-right">
                <icon-svg :iconClass="item.icon"></icon-svg>
              </span>
              <span class="context">
                <span class="name">{{item.name}}:</span>
                <span class="number">{{item.balance}}</span>
              </span>
            </div>
          </div>
        </bill-board>
      </div>
    </div>
  </div>
</template>

<script>
import BillBoard from '@/components/base/bill-board/bill-board'
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import { mapGetters } from 'vuex';
export default {
  components: {
    BillBoard,
    HeaderTemplatePhone,
    HeaderBack
  },
  data() {
    return {
      accountInfo: {
        accountName: 'vip999',
        accountType: 0,
        balance: 888888,
        refundRate: [
          {
            id: 1,
            name: '彩票返点',
            rate: '2.5%'
          },
          {
            id: 2,
            name: 'AG返点',
            rate: '1.00%'
          },
          {
            id: 3,
            name: '皇冠返水',
            rate: '1.25%'

          },
          {
            id: 4,
            name: '工资',
            rate: '0.05%'

          },
          {
            id: 5,
            name: '分红',
            rate: '0.00%'
          }
        ],
        balances: [
          {
            id: 1,
            icon: 'iconzijin_XiTongYUE',
            name: '积分余额',
            balance: 5000
          },
          {
            id: 2,
            icon: 'iconzijin_AG',
            name: 'AG余额',
            balance: 5000, 
          },
          {
            id: 3,
            icon: 'iconzijin_BBin',
            name: 'BBin余额',
            balance: 0
          },
          {
            id: 4,
            icon: 'iconzijin_BuYuWang',
            name: '捕鱼王余额',
            balance: 5000
          },
          {
            id: 5,
            icon: 'iconzijin_MG',
            name: 'MG余额',
            balance: 5000
          },
          {
            id: 6,
            icon: 'iconzijin_CQ',
            name: 'CQ9余额',
            balance: 5000
          }
        ]
      },
      accountType: ['代理'],
      activeBalanceIndex: -1,
      isRefreshFinish: true
    }
  },
  methods: {
    handleMouseEnter(index) {
      this.activeBalanceIndex = index
    },
    handleMouseLeave() {
      this.activeBalanceIndex = -1
    },
    handleRefresh() {
      this.isRefreshFinish = false
      setTimeout(() => {
        this.isRefreshFinish = true
      }, 1000)
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px)
    .refund 
      display flex 
      background #fff 
      box-sizing border-box 
      padding 0 20px
      .item 
        height 48px 
        display flex 
        flex-direction column 
        justify-content space-around
        align-items center
        box-sizing border-box 
        padding 0 50px
        margin 16px 0
        &.accout-info 
          padding-left 0
          .text 
            color $color-sub-grey
            margin-right 5px
          .account-name 
            color $color-theme-dark 
            font-size 15px 
            font-weight 700
          .account-type 
            margin-left 10px 
            display inline-block 
            box-sizing border-box 
            padding 3px 5px 
            background-color #ff9421
            color #fff 
            border-radius 3px
        .top 
          color $color-sub-grey
        .bottom 
          color $color-theme-red
    .balance 
      display flex 
      flex-wrap wrap
      justify-content space-evenly
      background #fbf9f9
      padding-bottom 20px
    .billboard-adjust 
      width 200px 
      margin-top 20px
      &:last-child 
        margin-right 930px
    .billboard-adjust >>> .content 
      margin-bottom 0
      &:nth-child(5) 
        margin-right 0
      .balance-item 
        display flex
        height 100px
        align-items center 
        background $color-text-button
        position relative 
        .mask 
          position absolute 
          top 0 
          left 0
          right 0
          bottom 0
          background rgba(0,0,0, 0.5)
          display flex 
          align-items center
          justify-content center
          .icon 
            .iconfont 
              font-size 24px
              color #fff
        .content-wrapper
          display flex
          align-items center
          height 40px
          .icon 
            width 30px 
            height 30px 
            padding 0 20px
            border-right 1px solid $color-divide-line
            font-size 30px
            display flex 
            align-items center 
            justify-content center
          .context
            display flex
            flex-direction column
            justify-content space-around
            align-items flex-start
            height 40px
            margin-left 20px
            .number 
              color $color-theme-red
@media screen and (max-width 750px)
  .main
    box-sizing border-box 
    padding 10px
    padding-top 58px
    .refund 
      display flex 
      flex-wrap wrap
      background #fff 
      box-sizing border-box 
      padding 0 10px
      border-radius 3px
      .item 
        height 40px 
        display flex 
        flex-direction column 
        justify-content space-around
        align-items center
        box-sizing border-box 
        margin 15px 0
        width calc(100% / 4)
        .top 
          color $color-sub-grey
        .bottom 
          color $color-theme-red
    .balance 
      display flex 
      flex-wrap wrap
      justify-content space-between
      .billboard-adjust 
        width calc((100% - 16px) / 2)
        margin-top 15px
      .billboard-adjust >>> .content 
        margin-bottom 0
        &:nth-child(5) 
          margin-right 0
        .balance-item 
          display flex
          height 100px
          align-items center 
          background $color-text-button
          position relative 
          .mask 
            position absolute 
            top 0 
            left 0
            right 0
            bottom 0
            background rgba(0,0,0, 0.5)
            display flex 
            align-items center
            justify-content center
            .icon 
              .iconfont 
                font-size 24px
                color #fff
          .content-wrapper
            display flex
            align-items center
            height 40px
            .icon 
              width 40px 
              height 40px 
              padding 0 10px
              // border-right 1px solid $color-divide-line
              font-size 38px
            .context
              display flex
              flex-direction column
              justify-content space-around
              align-items flex-start
              height 40px
              margin-left 10px
              .number 
                color $color-theme-red           
</style>